<template>
  <div class="mvDetails">
    <!-- 视频 -->
    <div class="detailsVideo" v-if="detailsList" @click="changeVideo">
      <video
        id="mvVideo"
        :src="detailsList.brs['240']"
        width="100%"
        height="100%"
        ref="getVideo"
        @timeupdate="changePlay"
        autoplay
      ></video>
      <!-- 中间按钮 -->
      <div v-show="isShow">
        <i class="iconfont icon-bofang1 bf1" @click.stop="play" v-show="isShowPlay"></i>
        <i class="iconfont icon-suspend_icon bf1" @click.stop="paused" v-show="!isShowPlay"></i>
      </div>
      <!-- 顶部显示 -->
      <div class="title" v-show="isShow">
        <div class="title_left">
          <i class="iconfont icon-return backIcon" @click.stop="$router.go(-1)"></i>
          <p class="videoName">{{detailsList.name}}</p>
        </div>
        <div class="title_right">
          <i class="iconfont icon-xunzhao1 fx" @click.stop="showPopupShare"></i>
          <!-- <i class="iconfont icon-dashujukeshihuaico- gd"></i> -->
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="footerBtn" v-show="isShow">
        <P class="time">
          {{currentTime}}/
          <span>{{mvLength}}</span>
        </P>

        <i class="iconfont icon-shuaxin screen" @click="fullScreen"></i>
      </div>
      <van-slider
        class="jdt"
        v-model="progress"
        @change="onChange"
        active-color="#ee0a24"
        bar-height="3px"
        v-show="isShow"
      >
        <div slot="button" class="custom-button"></div>
      </van-slider>
    </div>
    <!-- 视频 end-->
    <!-- 内容 -->
    <div class="contentBox">
      <div class="top">
        <p>{{detailsList.name}}</p>
        <i class="iconfont icon-xia xia" v-show="direction" @click="changeDirection"></i>
        <i class="iconfont icon-shang shang" v-show="!direction" @click="changeDirection"></i>
      </div>
      <p class="watch">{{detailsList.playCount}}次观看</p>
      <div class="desc" v-show="!direction">
        <p>{{detailsList.publishTime}}发布</p>
        <p>{{detailsList.desc}}</p>
      </div>
      <div class="iconBox">
        <p>
          <i class="iconfont icon-dianzan" @click="give"></i>
          <span>{{detailsList.likeCount}}</span>
        </p>
        <p>
          <i class="iconfont icon-add" @click="collection"></i>
          <span>{{detailsList.subCount}}</span>
        </p>
        <p>
          <i class="iconfont icon-pinglun" @click="anchorPoint"></i>
          <span>{{detailsList.commentCount}}</span>
        </p>
        <p>
          <span @click="showPopupShare">
            <i class="iconfont icon-xunzhao1"></i>
          </span>
          <span>{{detailsList.shareCount}}</span>
        </p>
      </div>
      <!-- 弹出层 -->
      <van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">
        <div class="shareTitle">分享</div>
        <div class="shareIcon">
          <div class="shareIconItem">
            <i class="iconfont icon-yinle1"></i>
            <p>云音乐动态</p>
          </div>
          <div class="shareIconItem">
            <i class="iconfont icon-wodedingdan"></i>
            <p>私信</p>
          </div>
          <div class="shareIconItem">
            <i class="iconfont icon-danquxunhuan"></i>
            <p>复制链接</p>
          </div>
        </div>
      </van-popup>
      <!-- 弹出层 end-->
      <!-- 歌手 -->
      <!-- <div class="singer" v-if="singerDetailList">
        <div class="singerLeft">
          <div class="singerImg">
            <img :src="singerDetailList.img1v1Url" alt />
          </div>
          <p>{{singerDetailList.name}}</p>
        </div>
        <i class="iconfont icon-you"></i>
        <p class="btn" @click="goCollection">
          <span>+</span>
          收藏
        </p>
      </div> -->
    </div>
    <!-- 内容 end-->
    <commentary ref="comments"></commentary>

    <comments :commentId="commentId"></comments>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import commentary from "@/views/video/mvDetails/commentary.vue";
import comments from "@/views/video/mvDetails/Comment.vue";
export default {
  components: {
    commentary,
    comments
  },
  props: {},
  data() {
    return {
      detailsList: "",
      singerDetailList: "",
      isShowPlay: false,
      //   isShowPaused: true,
      isShow: false,
      show: false,
      mvDom: "",
      mvLength: "", // 视频总长度
      currentTime: "00:00 ", // 当前播放长度
      direction: true,
      commentList: "",
      num: 1,
      progress: 0,
      commentId: ""
    };
  },
  watch: {
    currentTime: function() {
				this.$nextTick(() => {
					this.progress = Math.round(
						(this.$refs.getVideo.currentTime / this.$refs.getVideo.duration) * 100
					);
					if (
						Math.round(this.$refs.getVideo.currentTime) ==
						Math.round(this.$refs.getVideo.duration)
					) {
						this.isShowPlay = true;
					}
				})
			}
  },
  computed: {},
  methods: {
    // 请求mv详情
    getMvDetails() {
      this.$http("/mv/detail", {
        params: {
          mvid: this.$route.params.id
        }
      }).then(res => {
        this.detailsList = res.data.data;
        this.commentId = this.$route.params.id;
        console.log(this.detailsList);
        console.log(this.$route.params.id);
      });
    },
    // 请求歌手单曲详情
    getSingerDetail() {
      this.$http("/artists", {
        params: {
          id: this.$route.params.artistId
        }
      }).then(res => {
        console.log(res);
        this.singerDetailList = res.data.artist;
        console.log(this.singerDetailList);
      });
    },
    // 请求评论
    getComment() {
      this.$http("/comment/mv", {
        params: {
          id: this.$route.params.id,
          limit: this.num * 20
        }
      }).then(res => {
        console.log(res);
        this.commentList = res.data;
      });
    },
    // 点击开始
    changeVideo() {
      this.isShow = !this.isShow;
      this.mvLength = util.time2(this.$refs.getVideo.duration);
      // console.log(util.time2(this.$refs.getVideo.currentTime));
      // console.log(util.time2(this.$refs.getVideo.duration));
    },
    // 点击播放
    play() {
      this.$refs.getVideo.play();
      this.isShowPlay = false;
      //   this.isShowPaused = true;
    },
    // 点击暂停
    paused() {
      this.$refs.getVideo.pause();
      //   this.isShowPaused = false;
      this.isShowPlay = true;
    },
    // 点击全屏
    fullScreen() {
      this.$refs.getVideo.webkitRequestFullScreen();
    },
    // 获取视频的长度和当前播放的长度
    getMvTime() {
      let mv = this.$refs.getVideo;
      //   console.log(util.time2(mv.currentTime));
      //   console.log(util.time2(mv.duration));
      // console.log(mv);
    },
    // 点击下拉显示
    changeDirection() {
      this.direction = !this.direction;
    },
    // 当前播放长度变化
    changePlay() {
      //  console.log(util.time2(this.$refs.getVideo.currentTime));
      
      this.currentTime = util.time2(this.$refs.getVideo.currentTime);
    },
    // 进度条
    onChange(value) {
      //  this.$toast('当前值：' + value);
      // this.$refs.getVideo.pause();
      // this.isShowPlay = true;
      console.log("拖动的值", this.progress);

      this.$refs.getVideo.currentTime =
        (this.progress * this.$refs.getVideo.duration) / 100;
    },
    // 点赞
    give() {
      this.$http("/resource/like", {
        params: {
          type: 1,
          t: 1,
          id: this.$route.params.id
        }
      }).then(res => {
        console.log(res);
      });
    },
    // 收藏视频
    collection() {
      console.log(this.$route.params.id);
      this.$http("/mv/sub", {
        params: {
          t: 1,
          id: this.$route.params.id
        }
      }).then(res => {
        console.log(res);
      });
    },
    // 锚点
    anchorPoint() {
      // console.log(this.$refs.comments.$el);
      // console.log(this.$refs.comments.$el.offsetTop);
      document.documentElement.scrollTop = this.$refs.comments.$el.offsetTop;
    },
    // 收藏歌手
    goCollection() {
      console.log(this.$route.params.artistId);
      this.$http("/artist/sub", {
        params: {
          artistId: this.$route.params.artistId,
          t: 1
        }
      }).then(res => {
        console.log(res);
      });
    },
    // 分享
    showPopupShare() {
      this.show = true;
    }
  },
  created() {
    this.getMvDetails();
    this.getSingerDetail();
    // this.getComment();
    // this.$http('/mv/sublist').then(res=>{
    //   console.log(res);
    // })
  },
  mounted() {},
 
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.mvDetails {
  .detailsVideo {
    width: 100%;
    // height: vw(211);
    position: fixed;
    top: 0;
    left: 0;
    .jdt {
      width: 100%;
      position: absolute;
      bottom: vw(2);
      left: 0;
      .custom-button {
        width: vw(14);
        height: vw(14);
        border-radius: 50%;
        background: #ee0a24;
      }
    }
    .bf1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: vw(30);
      color: #ccc;
    }
    .title {
      width: 100%;
      position: absolute;
      top: vw(16);
      left: vw(8);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        .backIcon {
          font-size: vw(26);
          // padding-top: vw(2);
          padding-right: vw(6);
        }
        .videoName {
          width: vw(250);
          height: vw(27);
          line-height: vw(27);
          font-size: vw(16);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .title_right {
      
        color: #fff;
        .fx {
          font-size: vw(26);
          padding-right: vw(20);
        }
        .gd {
          font-size: vw(36);
          
        }
      }
    }
    .footerBtn {
      width: 100%;
      position: absolute;
      bottom: vw(14);
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 vw(12);
      .time {
        color: #fff;
        font-size: vw(12);
        span {
          color: #ccc;
        }
      }
      .screen {
        color: #fff;
        font-size: vw(20);
      }
    }
  }
  .contentBox {
    margin-top: vw(220);
    .top {
      width: 100%;
      height: vw(26);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(20) vw(10);
      p {
        font-size: vw(16);
        font-weight: bold;
      }
      .xia {
        font-size: vw(20);
      }
      .shang {
        font-size: vw(15);
        padding-right: vw(2);
      }
    }
    .watch {
      font-size: vw(14);
      color: #333;
      padding: 0 vw(10);
    }
    .desc {
      font-size: vw(14);
      color: #111;
      padding: vw(10);
      p {
        padding-bottom: vw(5);
      }
    }
    .iconBox {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: vw(10) 0;
      border-bottom: vw(2) solid #ccc;
      p {
        display: flex;
        align-items: center;
        flex-direction: column;

        i {
          font-size: vw(26);
        }
        span {
          font-size: vw(14);
          color: #666;
        }
      }
    }
    .shareTitle {
      width: 100%;
      font-size: vw(14);
      color: #666;
      padding: vw(10) 0 vw(20) vw(10);
    }
    .shareIcon {
      width: 100%;
      display: flex;
      align-items: center;
      .shareIconItem {
        width: 25%;
        text-align: center;
        i {
          font-size: vw(20);
          color: #000;
         
        }
        p {
          font-size: vw(13);
          color: #111;
          padding-top: vw(20);
        }
      }
    }
    .singer {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(10);
      border-bottom: vw(4) solid #ccc;
      .singerLeft {
        display: flex;
        align-items: center;
        .singerImg {
          width: vw(30);
          height: vw(30);
          overflow: hidden;
          border-radius: 50%;

          img {
            width: 100%;
          }
        }
        p {
          padding-left: vw(10);
          font-size: vw(16);
        }
      }
      .btn {
        width: vw(60);
        height: vw(20);
        line-height: vw(20);
        background: #f00;
        text-align: center;
        border-radius: vw(20);
        font-size: vw(12);
        color: #eee;

        span {
          font-size: vw(12);
        }
      }
    }
  }
}
</style>